<template>
  <div class="nav_bar">
    <router-link to="/lobby">
      <p>
        <!--<img class="index_img" src="../../static/img/icon_home_n.png" alt="">-->
      </p>
      <div class="index_text">任务大厅</div>
    </router-link>
    <router-link to="/mine">
      <p>
        <!--<img class="discover_img"  src="../../static/img/icon_find_n.png" alt="">-->
      </p>
      <div class="discover_text">我的任务</div>
    </router-link>
    <router-link to="/center">
      <p>
        <!--<img class="mine_img"  src="../../static/img/icon_mine_n.png" alt="">-->
      </p>
      <div class="mine_text">个人中心</div>
    </router-link>
  </div>
</template>

<script>

  export default {
    name: 'TAB_BAR',
    mounted() {
      var vm = this;
//             $('.nav_bar a').on('tap', function (e) {
//                 console.log(111)
//                 $(this).find('div').addClass('color').siblings().removeClass('color')
//             })
    }

  }

</script>
<style scoped>
  .nav_bar {
    position: fixed;
    height: 50px;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: white;
    border-top: 1px solid #E2E2E2;
    z-index: 999999;
    padding: 3px 0;
    /* display: none; */
    overflow: scroll;
    -webkit-overflow-scroll: auto;
    -webkit-overflow-scroll: touch;
    display: -webkit-flex;
    display: flex;
  }

  .nav_bar a {
    display: block;
    float: left;
    width: 33.33%;
    /*height: 50px;*/
    /* line-height: 1.173333rem; */
    /* text-align: center; */
    color: #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* z-index: 1111; */
    /* box-sizing: content-box; */
  }

  .nav_bar a:first-child {
    border-left: none;
  }

  .nav_bar .router-link-active {
    /* color: orangered; */
  }

  .nav_bar img {
    display: block;
    width: 20px;
    margin: 0px auto;
  }

  .nav_bar p {
    width: 100%;
    padding: 2px 0;
    height: 47%;
    margin-bottom: 0;
    text-align: center;

  }

  .nav_bar div {
    width: 100%;
    padding-top: 4px;
    height: 47%;
    margin-top: -2px;
    text-align: center;
    /* color: grey; */
  }
</style>
